import { useState } from 'react'
import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom'
import { Button } from '@/components/ui/button.jsx'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card.jsx'
import { Badge } from '@/components/ui/badge.jsx'
import { 
  Home, 
  Users, 
  DollarSign, 
  Cpu, 
  Settings, 
  BarChart3,
  Menu,
  User,
  ChevronDown,
  Wallet,
  UserPlus,
  FileText,
  Zap,
  Droplets,
  Shield
} from 'lucide-react'
import './App.css'

// 侧边栏组件
function Sidebar() {
  const location = useLocation()
  
  const menuItems = [
    { path: '/', title: '首页', icon: Home },
    { path: '/tenant', title: '租户管理', icon: Users },
    { path: '/financial', title: '财务管理', icon: DollarSign },
    { path: '/device', title: '设备管理', icon: Cpu },
    { path: '/system', title: '系统管理', icon: Settings },
    { path: '/report', title: '报表管理', icon: BarChart3 }
  ]

  return (
    <div className="w-64 bg-gradient-to-b from-slate-800 to-slate-900 text-white flex flex-col">
      <div className="p-6 border-b border-slate-700">
        <h1 className="text-xl font-bold">预付费系统</h1>
      </div>
      <nav className="flex-1 p-4">
        {menuItems.map((item) => {
          const Icon = item.icon
          const isActive = location.pathname === item.path
          return (
            <Link
              key={item.path}
              to={item.path}
              className={`flex items-center gap-3 px-4 py-3 rounded-lg mb-2 transition-all ${
                isActive 
                  ? 'bg-blue-600 text-white border-r-4 border-blue-400' 
                  : 'text-slate-300 hover:bg-slate-700 hover:text-white'
              }`}
            >
              <Icon size={20} />
              <span>{item.title}</span>
            </Link>
          )
        })}
      </nav>
    </div>
  )
}

// 顶部导航组件
function TopNav() {
  return (
    <div className="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 shadow-sm">
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="sm">
          <Menu size={20} />
        </Button>
        <span className="text-blue-600 font-medium">清洁人员系统内网</span>
      </div>
      <div className="flex items-center gap-3">
        <div className="flex items-center gap-2 cursor-pointer">
          <div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white text-sm">
            管
          </div>
          <span className="text-gray-700">管理员</span>
          <ChevronDown size={16} className="text-gray-500" />
        </div>
      </div>
    </div>
  )
}

// 首页组件
function HomePage() {
  const dashboardCards = [
    { title: '充值缴费', icon: Wallet, color: 'bg-blue-600' },
    { title: '一键开户', icon: UserPlus, color: 'bg-blue-600' },
    { title: '账单查询', icon: FileText, color: 'bg-blue-600' },
    { title: '电表管理', icon: Zap, color: 'bg-blue-600' },
    { title: '水表管理', icon: Droplets, color: 'bg-blue-600' },
    { title: '保电管理', icon: Shield, color: 'bg-blue-600' }
  ]

  const deviceStats = [
    { name: '采集网关', online: 112, offline: 4, icon: Cpu },
    { name: '4G模块', online: 112, offline: 4, icon: Cpu },
    { name: '电表数量', online: 112, offline: 4, icon: Zap },
    { name: '水表数量', online: 112, offline: 4, icon: Droplets }
  ]

  const tableData = [
    { id: 1, name: '李子明', balance: 36.00, prepaid: 30.00, arrears: 20.00, time: '2025-05-02 15:30:00', status: '是' },
    { id: 2, name: '李子明', balance: 36.00, prepaid: 30.00, arrears: 20.00, time: '2025-05-02 15:30:00', status: '是' },
    { id: 3, name: '李子明', balance: 36.00, prepaid: 30.00, arrears: 20.00, time: '2025-05-02 15:30:00', status: '是' },
    { id: 4, name: '李子明', balance: 36.00, prepaid: 30.00, arrears: 20.00, time: '2025-05-02 15:30:00', status: '是' },
    { id: 5, name: '李子明', balance: 36.00, prepaid: 30.00, arrears: 20.00, time: '2025-05-02 15:30:00', status: '是' }
  ]

  return (
    <div className="p-6 space-y-6">
      {/* 功能卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {dashboardCards.map((card, index) => {
          const Icon = card.icon
          return (
            <Card key={index} className="cursor-pointer hover:shadow-lg transition-shadow">
              <CardContent className="flex items-center p-6">
                <div className={`w-12 h-12 rounded-full ${card.color} flex items-center justify-center mr-4`}>
                  <Icon size={24} className="text-white" />
                </div>
                <div className="flex-1">
                  <h3 className="font-medium text-gray-900">{card.title}</h3>
                </div>
                <ChevronDown size={16} className="text-gray-400 rotate-[-90deg]" />
              </CardContent>
            </Card>
          )
        })}
      </div>

      {/* 统计图表区域 */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <CardTitle>近30天费用占比</CardTitle>
          <Button variant="ghost" size="sm">
            <BarChart3 size={16} />
          </Button>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            {/* 左侧图表 */}
            <div className="flex items-center justify-center">
              <div className="relative w-48 h-48">
                <div className="w-full h-full rounded-full bg-gradient-to-r from-blue-500 to-orange-500 flex items-center justify-center">
                  <div className="w-32 h-32 bg-white rounded-full flex flex-col items-center justify-center">
                    <div className="text-2xl font-bold text-gray-900">16,112.90</div>
                    <div className="text-sm text-gray-500">总金额</div>
                  </div>
                </div>
              </div>
            </div>

            {/* 右侧图例 */}
            <div className="space-y-4">
              <h4 className="font-medium text-gray-900 mb-4">缴费来源</h4>
              <div className="space-y-3">
                {[
                  { name: '聚合', value: '0.00', percent: '0.00%', color: 'bg-purple-500' },
                  { name: '微信', value: '0.00', percent: '0.00%', color: 'bg-green-500' },
                  { name: '支付宝', value: '0.00', percent: '0.00%', color: 'bg-orange-500' },
                  { name: '现金', value: '0.00', percent: '100.00%', color: 'bg-blue-500' },
                  { name: '银联', value: '0.00', percent: '0.00%', color: 'bg-teal-500' }
                ].map((item, index) => (
                  <div key={index} className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <div className={`w-3 h-3 rounded-full ${item.color}`}></div>
                      <span className="text-sm text-gray-600">{item.name}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <span className="text-sm font-medium">{item.value}</span>
                      <span className="text-sm text-gray-500">{item.percent}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 设备状态 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {deviceStats.map((device, index) => {
          const Icon = device.icon
          return (
            <Card key={index}>
              <CardContent className="p-6">
                <div className="flex items-center mb-4">
                  <div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center mr-3">
                    <Icon size={20} className="text-white" />
                  </div>
                  <h3 className="font-medium text-gray-900">{device.name}</h3>
                </div>
                <div className="flex justify-between">
                  <div className="text-center">
                    <div className="text-xs text-gray-500 mb-1">在线数量</div>
                    <div className="text-lg font-bold text-green-600">{device.online}</div>
                  </div>
                  <div className="text-center">
                    <div className="text-xs text-gray-500 mb-1">离线数量</div>
                    <div className="text-lg font-bold text-red-600">{device.offline}</div>
                  </div>
                </div>
              </CardContent>
            </Card>
          )
        })}
      </div>

      {/* 表格区域 */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <CardTitle></CardTitle>
          <Button variant="link" className="text-blue-600">更多 &gt;</Button>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b border-gray-200">
                  <th className="text-left py-3 px-4 font-medium text-gray-900">序号</th>
                  <th className="text-left py-3 px-4 font-medium text-gray-900">租户名称</th>
                  <th className="text-left py-3 px-4 font-medium text-gray-900">余额</th>
                  <th className="text-left py-3 px-4 font-medium text-gray-900">预缴金额</th>
                  <th className="text-left py-3 px-4 font-medium text-gray-900">欠费金额</th>
                  <th className="text-left py-3 px-4 font-medium text-gray-900">最后缴费时间</th>
                  <th className="text-left py-3 px-4 font-medium text-gray-900">是否欠费</th>
                </tr>
              </thead>
              <tbody>
                {tableData.map((row) => (
                  <tr key={row.id} className="border-b border-gray-100">
                    <td className="py-3 px-4 text-gray-700">{row.id}</td>
                    <td className="py-3 px-4 text-gray-700">{row.name}</td>
                    <td className="py-3 px-4 text-gray-700">¥{row.balance.toFixed(2)}</td>
                    <td className="py-3 px-4 text-gray-700">¥{row.prepaid.toFixed(2)}</td>
                    <td className="py-3 px-4 text-gray-700">¥{row.arrears.toFixed(2)}</td>
                    <td className="py-3 px-4 text-gray-700">{row.time}</td>
                    <td className="py-3 px-4">
                      <Badge variant={row.status === '是' ? 'destructive' : 'secondary'}>
                        {row.status}
                      </Badge>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

// 其他页面组件
function TenantPage() {
  return (
    <div className="p-6">
      <Card>
        <CardHeader>
          <CardTitle>租户管理</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-gray-600">租户管理功能正在开发中...</p>
        </CardContent>
      </Card>
    </div>
  )
}

function FinancialPage() {
  return (
    <div className="p-6">
      <Card>
        <CardHeader>
          <CardTitle>财务管理</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-gray-600">财务管理功能正在开发中...</p>
        </CardContent>
      </Card>
    </div>
  )
}

function DevicePage() {
  return (
    <div className="p-6">
      <Card>
        <CardHeader>
          <CardTitle>设备管理</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-gray-600">设备管理功能正在开发中...</p>
        </CardContent>
      </Card>
    </div>
  )
}

function SystemPage() {
  return (
    <div className="p-6">
      <Card>
        <CardHeader>
          <CardTitle>系统管理</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-gray-600">系统管理功能正在开发中...</p>
        </CardContent>
      </Card>
    </div>
  )
}

function ReportPage() {
  return (
    <div className="p-6">
      <Card>
        <CardHeader>
          <CardTitle>报表管理</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-gray-600">报表管理功能正在开发中...</p>
        </CardContent>
      </Card>
    </div>
  )
}

function App() {
  return (
    <Router>
      <div className="h-screen flex bg-gray-50">
        <Sidebar />
        <div className="flex-1 flex flex-col">
          <TopNav />
          <div className="flex-1 overflow-y-auto">
            <Routes>
              <Route path="/" element={<HomePage />} />
              <Route path="/tenant" element={<TenantPage />} />
              <Route path="/financial" element={<FinancialPage />} />
              <Route path="/device" element={<DevicePage />} />
              <Route path="/system" element={<SystemPage />} />
              <Route path="/report" element={<ReportPage />} />
            </Routes>
          </div>
        </div>
      </div>
    </Router>
  )
}

export default App

